<template>
	<view class="file-content">
		<u-tabs :list="data.tabs" lineColor="#216DD9" :activeStyle="{ color: '#216DD9',fontWeight: 600}"
			:scrollable="false" @change="changeTab"></u-tabs>
		<z-paging ref="paging" v-model="data.list" @query="getList">
			
			<!-- <u-list> -->
			<view>
				<view class="fileList" v-if="tabIndex == 0">
					<view class="fileitem" v-for="(item, index) in data.list" :key="index">
						<view class="item">
							<image class="icon" mode="aspectFit" src="../../../static/images/file-paste.png" alt=""></image>
							<view class="info" @click="policyPreview(item)">
								<view class="title">{{ item.file.org_name }}</view>
								<view class="size">{{ item.file.size_format }}M</view>
							</view>
						</view>
						<u-icon @click="goNav('/pages/contract/fileSign?id='+item.id)" name="edit-pen-fill"
							color="#3c9cff" size="30"></u-icon>
						<u-icon @click="delFile('file',item)" name="trash-fill" color="#fa3534" size="26"></u-icon>
					</view>
				</view>
				<view v-if="tabIndex == 1" class="imgList">
					<view v-for="(item, index) in data.list" :key="index" class="imgs">
						<image @click="previewImgs(item.file.path_url)" mode="aspectFit"
							:src="item.file.thumbnail_path_url" alt=""></image>
						<u-icon @click="delFile('img',item)" name="trash-fill" color="#fa3534" size="24"></u-icon>
					</view>
				</view>
				<view v-if="tabIndex == 2" class="videoList">
					<view v-for="(item, index) in data.list" :key="index" class="video">
						<video :src="item.file.path_url"></video>
						<u-icon @click="delFile('video',item)" name="trash-fill" color="#fa3534" size="24"></u-icon>
					</view>
				</view>
			</view>
			<!-- </u-list> -->
			<view class="uploadBtn" @click="show = true">上传文件</view>
			<u-action-sheet :actions="data.menuInfo.list" @select="select" @close="close" cancelText="取消"
				:title="data.menuInfo.title" :closeOnClickOverlay="true" :closeOnClickAction="true" :round="24"
				:show="show"></u-action-sheet>
		</z-paging>
	</view>
</template>
<script setup>
	import {
		fileList,
		fileStore,
		fileDel
	} from "../../../api/module/file";
	import {
		ref,
		reactive
	} from "vue"
	import {
		useStore
	} from 'vuex';
	import {
		upload,
		msg,
		goNav
	} from "../../../utils/common";
	import {
		previewfile,
		previewImage,
		handlesuffix
	} from "../../../utils/article/fileRead";
	const store = useStore()
	const userType = store.state.userType;
	const paging = ref(null)
	const data = reactive({
		form: {
			file_type: 'file',
			file: [],
		},
		tabs: [{
			value: 'file',
			name: '文件',
		}, {
			value: 'img',
			name: '图片',
		}, {
			value: 'video',
			name: '视频',
		}],
		menuInfo: {
			title: '选择文件',
			list: [{
				name: '上传文件',
				type: 'file',
				disabled: false
			}, {
				name: '上传图片',
				type: 'img',
				disabled: true
			}, {
				name: '上传视频',
				type: 'video',
				disabled: true
			}]
		},
		list: []
	});
	const tabIndex = ref(0)
	const show = ref(false)
	//初始化
	// onMounted(() => {
	// 	getList()
	// })
	const policyPreview = (info) => {
		// console.log(info);return;
		previewfile(info.file.pdf_url ? info.file.pdf_url : info.file.path_url)
	}
	//获取列表
	const getList = (pageNo, pageSize) => {
		const params = reactive({
			page: pageNo || 1,
			limit: pageSize || 10,
			file_type: data.form.file_type,
		});
		fileList(params).then(res => {
			paging.value.complete(res.data);
		})
	}
	//列表切换
	const changeTab = (e) => {
		tabIndex.value = e.index;
		data.menuInfo.list.forEach((v, i) => {
			if (e.index == i) {
				v.disabled = false
			} else {
				v.disabled = true
			}
		})
		data.form.file_type = e.value;
		paging.value.reload();
	}
	//触底加载
	const scrolltolower = () => {
		console.log('触底加载...')
	}
	//图片预览
	const previewImgs = (img) => {
		var imgArr = [];
		data.list.forEach((v, i) => {
			if (typeof(v.file.path_url) == 'string') {
				imgArr.push(v.file.path_url)
			}
		})
		setTimeout(() => {
			uni.previewImage({
				current: img,
				urls: imgArr,
			});
		}, 100)
	}
	//关闭弹窗
	const close = () => {
		show.value = false;
	}
	//选择上传方式
	const select = (e) => {
		const type = e.type
		switch (type) {
			case 'file':
				uploadFile()
				break;
			case 'img':
				uploadMedia('image')
				break;
			case 'video':
				uploadMedia('video')
				break;
			default:
				break;
		}
	}
	//文件上传
	const uploadFile = () => {
		wx.chooseMessageFile({
			count: 1,
			type: 'file',
			extension: ['doc', 'docx', 'pdf', 'pptx', 'ppt', 'xls', 'xlsx'],
			success: function(tempFilePaths) {
				const tempFilePath = tempFilePaths.tempFiles[0];
				const tempName = tempFilePath['name'];
				const tempPath = tempFilePath['path'];
				const tempArr = tempName.split('.');
				const tempExt = tempArr[tempArr.length - 1];
				upload({
					tempName: tempName,
					tempPath: tempPath,
					tempExt: tempExt,
				}, function(response) {
					data.form.file = response.id;
					fileStore(data.form).then(response => {
						paging.value.reload();
					});
				});
			}
		});
	}
	//图片或视频上传
	const uploadMedia = (mediaType) => {
		uni.chooseMedia({
			count: 1,
			mediaType: [mediaType],
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (tempFilePaths) => {
				const tempFilePath = tempFilePaths.tempFiles[0];
				const tempPath = tempFilePath['tempFilePath'];
				const tempNameArr = tempPath.split('/');
				const tempName = tempNameArr[tempNameArr.length - 1];
				const tempArr = tempName.split('.');
				const tempExt = tempArr[tempArr.length - 1];
				upload({
					tempName: tempName,
					tempPath: tempPath,
					tempExt: tempExt,
				}, function(response) {
					data.form.file = response.id;
					fileStore(data.form).then(response => {
						paging.value.reload();
					});
				});
			}
		});
	}
	const delFile = (type, item) => {
		const text = type == 'file' ? '文件' : type == 'img' ? '图片' : '视频';
		uni.showModal({
			title: '温馨提示',
			content: '确定要删除该' + text + '吗？',
			confirmText: '确认',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					fileDel({
						id: item.id
					}).then(res => {
						msg('删除成功');
						paging.value.reload();
					})
				}
			}
		});
	}
</script>
<style lang="less" scoped src="/static/css/my/file.scss"></style>